<style lang="scss" scoped></style>

<template>
  <div>
    <my-header></my-header>
    <el-row style="margin: auto; width: 1200px; margin-top: 20px">
      <el-col :span="6" v-for="v in productData" :key="v.id" style="padding: 10px">
        <img
          @click="$router.push('/create/product/' + v.id)"
          :src="v.productData.src"
          alt=""
          width="100%"
          height="500"
        />
        <el-button type="primary">
          <a :href="v.productData.src" style="color: white; text-decoration: none">下载</a>
        </el-button>
        <el-button type="danger" @click="handleDelete(v.id)">删除</el-button>
        <el-button type="info" @click="handleShare(v.id)">分享</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
interface ProductDataState {
  id: number
  productData: {
    src: string
    data: {
      name: string
      value: string
      type: string
      component: any
      style: {
        [propsName: string]: any
      }
      id: string
    }[]
  }
  userId: number
  createTime: number
  updateTime: number
  aboutId: null | string
}

const productData = ref<ProductDataState[]>([])
const _getProductList = async () => {
  const resp = await axios.get('/products')
  resp.data.data.forEach((v) => {
    v.productData = JSON.parse(v.productData)
  })
  console.log(resp.data.data)
  productData.value = resp.data.data
}
const handleDelete = async (id: number) => {
  const resp = await axios.delete(`/product/${id}`)
  if (resp.data.code === 200) {
    ElMessage.success(resp.data.message)
    _getProductList()
  }
}

const handleShare = (id: number) => {
  router.push('/public/' + id)
}

_getProductList()
</script>

<script lang="ts">
export default {
  name: 'ProductList'
}
</script>
